var timer = null;
Component.C({
    properties: {
        imgsArr: {
            type: Array,
            value: []
        },
        height: {
            type: Number,
            value: -1,
            observer(newVal, oldVal) {
                if (oldVal != newVal) {
                    let boxH = newVal / 0.552;
                    this.setData({
                        boxH: boxH
                    });
                }
            }
        },
        radius: {
            type: Number,
            value: 0,
            observer(newVal, oldVal) {
                if (oldVal != newVal) {
                    let imgRadius = newVal / 0.552;
                    this.setData({
                        imageRadius: imgRadius
                    });
                }
            }
        },
        autoPlay: {
            type: Boolean,
            value: false
        },
        time: {
            type: Number,
            value: 3000
        },
        showDoc: {
            type: Boolean,
            value: true
        },
        docC: {
            type: String,
            value: '#fff'
        },
        docAC: {
            type: String,
            value: '#ff5150'
        },
        pointSize: {
            type: Number,
            value: 18.12
        },
        current: {
            type: Number,
            value: -1,
            observer(newVal, oldVal) {
                if (oldVal != newVal) {
                    let index = newVal;
                    this.changeIndex(index + 1);
                    this.changeDocIndex(index)
                }
            }
        }
    },
    ready() {
        let query = this.createSelectorQuery();
        query
            .select('.container')
            .boundingClientRect((rect) => {
                this.setData({
                    scrollImgBoxW: rect.width * (this.data.imgsArr.length + 2)
                });
                this.setMoveX(this.data.currentIndex * rect.width);
                this.setIsReadyStatus(true)
            })
            .exec();
        if (this.data.autoPlay) {
            this.autoPlayFn();
        }
    },
    data: {
        isReady:false,
        boxH: 271.74,
        scrollImgBoxW: 0,
        imageRadius: 10,
        touch: false,
        touchStartX: 0,
        touchEndX: 0,
        moveX: 0,
        docIndex: 0,
        currentIndex: 1
    },
    methods: {
        setIsReadyStatus(status) {
            this.setData({
                isReady: status
            });
        },
        stopAutoPlay() {
            if (timer) {
                clearInterval(timer);
            }
        },
        autoPlayFn() {
            this.stopAutoPlay();
            let status = true;
            timer = setInterval(() => {
                let index = this.data.currentIndex + 1;
                if (index == this.data.imgsArr.length + 1) {
                    this.changeDocIndex(0);
                    this.changeIndex(this.data.imgsArr.length + 1);
                    setTimeout(() => {
                        this.setMoveX(this.data.scrollImgBoxW / (this.data.imgsArr.length + 2));
                        this.setTouchStatus(true);
                        this.changeIndex(1);
                        this.setTouchStatus(false);
                    }, 500);
                } else {
                    this.changeIndex(index);
                    this.changeDocIndex(this.data.docIndex + 1);
                }
            }, this.data.time);
        },
        changeIndex(index) {
            this.setData({
                currentIndex: parseInt(index)
            });
        },
        changeDocIndex(index) {
            this.setData({
                docIndex: parseInt(index)
            });
        },
        change(ev) {
            let detail = ev.currentTarget.dataset;
            this.changeIndex(detail.index + 1);
            this.changeDocIndex(detail.index);
        },
        setTouchStatus(status) {
            this.setData({
                touch: status
            });
        },
        setTouchStartX(val) {
            this.setData({
                touchStartX: val
            });
        },
        setTouchEndX(val) {
            this.setData({
                touchEndX: val
            });
        },
        setMoveX(val) {
            this.setData({
                moveX: val
            });
        },
        touchstart(ev) {
            if (this.data.autoPlay) {
                this.stopAutoPlay();
            }
            let x = ev.changedTouches[0].clientX;
            if (this.data.currentIndex != 0) {
                let startMoveX = (this.data.scrollImgBoxW / (this.data.imgsArr.length + 2)) * this.data.currentIndex;
                this.setMoveX(startMoveX);
            }
            this.setTouchStatus(true);
            this.setTouchStartX(x);
        },
        touchmove(ev) {
            let x = this.data.touchStartX - ev.changedTouches[0].clientX;
            if (this.data.currentIndex != 0) {
                x = x + (this.data.scrollImgBoxW / (this.data.imgsArr.length + 2)) * this.data.currentIndex;
            }
            this.setMoveX(x);
        },
        touchend(ev) {
            if (this.data.autoPlay) {
                this.autoPlayFn();
            }
            let x = ev.changedTouches[0].clientX;
            this.setTouchStatus(false);
            this.setTouchEndX(x);
            if (this.data.touchStartX - x > 100) {
                console.log(this.data.currentIndex, this.data.docIndex, this.data.imgsArr.length);
                if (this.data.currentIndex > 0 && this.data.currentIndex < this.data.imgsArr.length) {
                    this.changeIndex(this.data.currentIndex + 1);
                    this.changeDocIndex(this.data.docIndex + 1);
                } else if (this.data.currentIndex == this.data.imgsArr.length) {
                    this.changeDocIndex(0);
                    this.changeIndex(this.data.imgsArr.length + 1);
                    setTimeout(() => {
                        this.setMoveX(this.data.scrollImgBoxW / (this.data.imgsArr.length + 2));
                        this.setTouchStatus(true);
                        this.changeIndex(1);
                    }, 500);
                }
            } else if (this.data.touchStartX - x < -100) {
                if (this.data.currentIndex >= 1 && this.data.currentIndex <= this.data.imgsArr.length) {
                    if (this.data.currentIndex == 1) {
                        this.changeDocIndex(this.data.imgsArr.length - 1);
                        this.changeIndex(0);
                        setTimeout(() => {
                            this.setTouchStatus(true);
                            this.changeIndex(this.data.imgsArr.length);
                        }, 500);
                    } else if (this.data.currentIndex > 1) {
                        this.changeDocIndex(this.data.docIndex - 1);
                        this.changeIndex(this.data.currentIndex - 1);
                    }
                }
            }
            this.setMoveX(0);
            this.setTouchStartX(0);
        }
    }
});
